<template>
	<div class="home">
		<!-- 筛选统计 -->
		<div class="filter">
			<div class="filter-top">
				<div class="_top-filter">
					<div style="width:125px;">
						<el-select
							size="mini"
							class="time-type"
							filterable
							v-model="selects.timeType"
							@change="val => refresh({ timeType: val, page: 1 })"
						>
							<!-- <el-option label="全部" value=""></el-option> -->
							<el-option label="创建时间" :value="0"></el-option>
							<el-option label="付款时间" :value="1"></el-option>
							<el-option label="结算时间" :value="2"></el-option>
						</el-select>
					</div>
					<div
						class="filter-btn"
						:class="[index == filterArrActive ? 'filter-btn-active' : '']"
						@click="filterArrActive = index"
						v-for="(item, index) in filterArr"
						:key="index"
					>
						{{ item }}
					</div>

					<div style="width:125px;margin-left:10px">
						<el-tag size="medium" type="info">
							{{ params.period == 0 ? '1小时' : '1天' }}
						</el-tag>
					</div>
				</div>
				<commission-count ref="commission-count"></commission-count>
			</div>
		</div>

		<div class="container">
			<!-- 图表 -->
			<div class="charts" style="background:#fff;">
				<div class="c-tabs">
					<div
						class="c-tab"
						v-for="(item, index) in leftNavs"
						:key="index"
						@click="activeName = index"
					>
						<div
							class="c-tab-title"
							:class="[activeName == index ? 'c-tab-title-active' : '']"
						>
							{{ item }}
						</div>
						<div
							class="c-tab-bar"
							:class="[activeName == index ? 'c-tab-bar-active' : '']"
						></div>
					</div>
				</div>
				<transition appear>
					<div class="card-body charts-body" v-show="activeName == '0'">
						<echart1 v-show="chartsNull" style="height:520px" ref="charts"></echart1>
						<div v-show="!chartsNull" class="charts-null">
							<icon-svg name="icon-empty"></icon-svg>
							<p>暂无数据</p>
						</div>
					</div>
				</transition>
				<div class="card-body charts-body" v-show="activeName == '1'">
					<cl-crud ref="crud" @load="onChartLoad">
						<template #table-column-hesitateTime="{ scope }">{{
							formatDate(scope.row.hesitateTime)
						}}</template>
						<template #table-column-address="{ scope }">
							<div class="text-overflow" style="width:100%">
								{{ rightActiveName == 0 ? scope.row.itemTitle : scope.row.key }}
							</div>
						</template>
					</cl-crud>
				</div>
			</div>
			<!-- 卡片 -->
			<div class="card card-plan">
				<div class="c-tabs">
					<div
						class="c-tab"
						v-for="(item, index) in rightNavs"
						:key="index"
						@click="rightActiveName = index"
					>
						<div
							class="c-tab-title"
							:class="[rightActiveName == index ? 'c-tab-title-active' : '']"
						>
							{{ item }}
						</div>
						<div
							class="c-tab-bar"
							:class="[rightActiveName == index ? 'c-tab-bar-active' : '']"
						></div>
					</div>
					<div class="parment-select" v-if="rightActiveName == 3">
						<select-group @change="val => refreshParment(val)"></select-group>
					</div>
				</div>

				<div class="card-body">
					<cl-crud ref="crud" @load="onLoad">
						<template #table-column-switch="{ scope }">
							<template v-if="rightActiveName == 0">
								<div
									class="text-overflow comm-tabTitle"
									style="width:100%; color: #f40;"
									@click="toProDetail(scope.row)"
									:title="scope.row.itemTitle"
								>
									{{ scope.row.itemTitle }}
								</div>
							</template>
							<template v-if="rightActiveName == 1">
								<div
									style="text-align:center;width:100%; color: #f40"
									class="comm-tabTitle"
									@click="toPidDetail(scope.row)"
								>
									{{ scope.row.adzoneName }}
								</div>
							</template>
							<template v-if="rightActiveName == 2">
								<div
									style="text-align:center;width:100%; color: #f40"
									class="comm-tabTitle"
									@click="toEmDetail(scope.row)"
								>
									{{ scope.row.staffName }}
								</div>
							</template>
							<template v-if="rightActiveName == 3">
								<div
									style="text-align:center;width:100%; color: #f40"
									class="comm-tabTitle"
									@click="toTeamDetail(scope.row)"
								>
									{{ scope.row.departmentName }}
								</div>
							</template>
						</template>
						<template #table-header-switch>
							<template v-if="rightActiveName == 0">产品</template>
							<template v-if="rightActiveName == 1">推广位</template>
							<template v-if="rightActiveName == 2">运营人</template>
							<template v-if="rightActiveName == 3">组织统计</template>
						</template>
					</cl-crud>

					<div class="my-list-more" @click="goto" v-show="rightListLength > 0">
						查看更多
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Echart1 from '@/components/echarts/1.vue';
import commissionCount from '@/components/order/commission-count.vue';
import { dateFormat, formatDate } from '@/utils/index';
import SelectGroup from '@/components/order/select-group';
export default {
	components: {
		Echart1,
		commissionCount,
		SelectGroup
	},

	data() {
		return {
			filterArr: ['今日', '昨日', '最近7天', '最近30天', '本月'],
			filterArrActive: 0,
			selects: {
				timeType: 0,
				period: 0
			},
			activeName: '0',
			rightActiveName: '0',
			leftNavs: ['趋势图', '列表'],
			rightNavs: ['产品', '推广位', '运营人', '组织统计'],
			rightListLength: 0,
			crud: '',
			crudChart: '',
			params: {
				timeType: 0,
				period: 0,
				...dateFormat(0)
			},
			crudServe: this.$service.home.topProduct,
			chartsNull: true
		};
	},
	watch: {
		rightActiveName(val) {
			switch (val) {
				case 0:
					this.crudServe = this.$service.home.topProduct;
					break;
				case 1:
					this.crudServe = this.$service.home.topPosition;
					break;
				case 2:
					this.crudServe = this.$service.home.topStaff;
					break;
				case 3:
					this.crudServe = this.$service.home.topGroup;
					break;
			}
			this.$refs['crud'].service.page = this.crudServe;
			this.crud.refresh({
				page: 1,
				size: 10,
				teamId: null
			});
		},
		filterArrActive(val) {
			if (val >= 2) {
				this.params.period = 1;
			} else {
				this.params.period = 0;
			}
			this.refresh(dateFormat(val));
			this.crud.refresh({
				page: 1,
				size: 10,
				...dateFormat(val)
			});
		}
	},
	methods: {
		//跳转到产品详情
		toProDetail(val) {
			this.$router.push({
				path: '/order/orderprocuct',
				query: {
					itemId: val.itemId,
					itemLink: val.itemLink,
					product: val.itemTitle,
					startTime: this.params.startTime,
					endTime: this.params.endTime
				}
			});
		},
		// 跳转到推广位
		toPidDetail(val) {
			this.$router.push({
				path: '/order/pid',
				query: {
					adzoneId: val.adzoneId,
					title: val.adzoneName,
					startTime: this.params.startTime,
					endTime: this.params.endTime
				}
			});
		},
		//跳转到员工详情
		toEmDetail(val) {
			this.$router.push({
				path: '/order/employee',
				query: {
					staffId: val.staffId,
					title: val.staffName,
					startTime: this.params.startTime,
					endTime: this.params.endTime
				}
			});
		},
		toTeamDetail(val) {
			this.$router.push({
				path: '/order/group',
				query: {
					teamId: val.departmentId,
					title: val.departmentName,
					startTime: this.params.startTime,
					endTime: this.params.endTime
				}
			});
		},
		//筛选组织
		refreshParment(val) {
			this.$refs['crud'].service.page = this.$service.home.topGroup;
			this.crud.refresh({
				page: 1,
				size: 10,
				teamId: val
			});
		},
		formatDate,
		// 重刷
		refresh(params) {
			this.params = { ...this.params, ...params };
			let prop = '';
			if (params.timeType == 0) {
				prop = 'tkCreateTime';
			} else if (params.timeType == 1) {
				prop = 'tkPaidTime';
			} else if (params.timeType == 2) {
				prop = 'tkEarningTime';
			} else {
				prop = '';
			}
			this.crudChart.refresh({ ...this.params, prop });
		},
		goto() {
			console.log('goto');
			if (this.rightActiveName == 0) {
				this.$router.push(
					'/order/orderprocuct?startTime=' +
						this.params.startTime +
						'&endTime=' +
						this.params.endTime
				);
				return;
			}
			if (this.rightActiveName == 1) {
				this.$router.push(
					'/order/pid?startTime=' +
						this.params.startTime +
						'&endTime=' +
						this.params.endTime
				);
				return;
			}
			if (this.rightActiveName == 2) {
				this.$router.push(
					'/order/employee?startTime=' +
						this.params.startTime +
						'&endTime=' +
						this.params.endTime
				);
				return;
			}
			if (this.rightActiveName == 3) {
				this.$router.push(
					'/order/group?startTime=' +
						this.params.startTime +
						'&endTime=' +
						this.params.endTime
				);
				return;
			}
		},
		onChartLoad({ ctx, app }) {
			this.crudChart = app;
			this.$refs['charts'].showLoading();
			ctx.service(this.$service.order)
				.set('dict', {
					api: {
						page: 'timeStatistics'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							align: 'center',
							label: '序号',
							width: 70
						},
						{
							label: '时间',
							prop: 'time',
							sortable: true,
							align: 'center',
							minwidth: 150
						},
						{
							label: '犹豫时长',
							prop: 'hesitateTime',
							align: 'center',
							minWidth: 100
						},
						{
							label: '全部单数',
							prop: 'orderNum',
							sortable: true,
							align: 'center',
							minWidth: 100,
							emptyText: '0'
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							sortable: true,
							align: 'center',
							minWidth: 100,
							emptyText: '0'
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							sortable: true,
							align: 'center',
							minWidth: 100,
							emptyText: '0'
						}
					],
					op: {
						visible: false
					},

					props: {
						'max-height': '520px',
						'tree-props': { children: 'children', hasChildren: 'hasChildren' },
						'row-key': 'id',
						stripe: true
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入运营人名称'
					}
				})
				.set('layout', [['data-table']])
				.on('refresh', async (params, { next }) => {
					const { subData, list } = await next(params);
					this.$refs['commission-count'].refresh(subData);
					if (this.$refs['charts']) {
						this.$refs['charts'].hideLoading();
					}
					if (list.length > 0) {
						this.chartsNull = true;
						this.$refs['charts'].refresh(this.formatChart(list));
					} else {
						this.chartsNull = false;
					}
				})
				.done();

			app.refresh({
				timeType: 0,
				period: 0,
				sort: 'desc',
				...dateFormat(0)
			});
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service({
				page: this.crudServe
			})
				.set('table', {
					columns: [
						{
							type: 'index',
							align: 'center',
							label: 'TOP10',
							width: 70
						},
						{
							label: '产品',
							prop: 'switch',
							'header-align': 'center',
							'class-name': 'product-name'
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							sortable: true,
							align: 'center',
							minWidth: 100,
							defaultSort: 'asc',
							emptyText: '0'
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							sortable: true,
							minWidth: 100,
							align: 'center',
							emptyText: '0'
						}
					],
					op: {
						visible: false
					},

					props: {
						'max-height': '520px',
						'tree-props': { children: 'children', hasChildren: 'hasChildren' },
						'row-key': 'id',
						stripe: true,
						'default-sort': { prop: 'validCommission', order: 'descending' }
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入运营人名称'
					}
				})
				.set('layout', [['data-table']])
				.on('refresh', async (params, { next }) => {
					if (this.rightActiveName != 3) params.teamId = null;
					const { list } = await next({
						...params,
						size: 10
					});
					this.rightListLength = list.length;

					list.map(item => {
						if (item.totleCommission) {
							item.totleCommission = parseFloat(item.totleCommission).toFixed(2);
						}
					});
				})
				.done();

			app.refresh({
				page: 1,
				size: 10,
				...dateFormat(0)
			});
		},
		// 格式化图表数据
		formatChart(list) {
			const titleArr = ['全部单数', '有效单数', '有效佣金'];
			let obj = {
				data: titleArr.map(item => {
					return {
						name: item,
						type: 'line',
						data: [],
						smooth: true
					};
				}),
				xAxis: [],
				legendSelect: {},
				lengend: titleArr
			};

			titleArr.map(item => {
				obj.legendSelect[item] = true;
			});
			list.map(item => {
				obj.data[0].data.push(item.orderNum);
				obj.data[1].data.push(item.validOrderNum);
				obj.data[2].data.push(item.validCommission);
				obj.xAxis.push(item.time);
			});

			return obj;
		}
	}
};
</script>

<style lang="stylus" scoped>

.home {
	overflow-y scroll
	min-width 1200px
	.filter {
		height: calc(152px + 50px);
		// width: calc(100% - 72px);
		margin: 0 auto;
		background-color: #ffffff;
		padding: 20px 10px 0 10px;
	}

	.container {
		// width: calc(100% - 72px);
		min-height 620px
		margin: 0 auto;
		height: calc(100vh - 202px - 60px - 6px - 21px - 30px);
		margin-top: 20px;
		box-sizing: border-box;
		display: flex;

		.charts {
			width: 60%;
			padding-top: 15px;
			padding-right 18px
		}

		.card {
			width: calc(40% - 21px);
			background-color: #fff;
			border-radius: 5px;
			box-sizing: border-box;
			margin-left: 21px;
			padding-top: 15px;
			.card-title {
				color: #000;
				padding: 20px 20px 0 20px;
			}
			.c-tabs {
				.parment-select {
					padding-right: 17px;
					display: flex;
					justify-content: flex-end;
					flex:1
				}
			}
		}
	}
}

.my-list-more {
	color #B5B5B5
	font-size 14px
	font-weight 400
	width 100%
	text-align center
	cursor pointer
	height 50px
	line-height 50px
}
>>>.el-table .el-table__header-wrapper {
	box-shadow:0px 3px 6px rgba(0,0,0,0.16);
	position relative
	z-index 2
	background-color #fff
}
.text-overflow {
	textOverflow()
}
.comm-tabTitle {
	cursor: pointer;
}
>>>.product-name {
	height 47px
}

.charts-body {
	// padding-top: 20px
}
>>>.crud-index {
	padding 0
	.card-body {
		padding 0
	}
	.el-row .crud-data-table .el-table th {
		background: #fff !important;
	}
}
>>>.crud-index .el-row:nth-child(1) {
	padding 0 !important
}

.filter-btn {
	width:83px;
	height: 28px;
	text-align center
    line-height: 28px;
	background:rgba(255,255,255,1);
	border:1px solid rgba(0,0,0,0.14901960784313725);
	font-size 14px
	color #606266
	margin-left 10px
	border-radius:4px;
	cursor: pointer;
	transition all .3s
}
.filter-btn-active {
	background:#FD5822
	color #ffffff
	border:1px solid #ffffff;
}
.charts-body {
	height 96%!important
}
.charts-null {
	height 100%
	text-align  center
	color #ccc
	width 100%
	display flex
	justify-content center
	align-items center
	flex-direction column
	svg {
		width 100px
		height 100px
	}
	p {
		color #333
	}
}
._top-filter {
	.time-type {
		>>>.el-input__inner {
			border-bottom-right-radius 4px
			border-top-right-radius 4px
		}
	}
}
</style>
